<template>
  <div class="detaild-container">
    <div class="header-box">
      <el-page-header @back="back" content="门店员工管理"></el-page-header>
    </div>
    <div style="margin: 5px;">

      <div class="container">
        <el-form :inline="true" class="demo-form-inline" label-width="80px">
          <el-form-item label="员工名称">
            <el-input size="small" v-model.trim="query.nickname"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" @click="searchTable">查询</el-button>
            <!-- <el-button type="success" size="small" icon="el-icon-plus" @click="addEmp">添加员工</el-button> -->
          </el-form-item>
        </el-form>
        <div class="table-origin">
          <my-table ref="myTableRef" stripe border highlight-current-row align="center" size="medium" :columns="columns"
            :loader="loader" :page-size="pageSize" :page="page"
            :pagination="{layout:'->, total, sizes, prev, pager, next, jumper',pageSizes: [10, 30, 50, 100]}">
            <template v-slot:watchState="{row,$index}">
              <el-switch
                v-model="row.watchState"
                :active-value="0"
                :inactive-value="-1"
                active-color="#13ce66"
                inactive-color="#cccccc"
                @change="changSwitch($event,row,$index)">
              </el-switch>
            </template>
            <template v-slot:addressOperate="{row}">
              {{row.province}}{{row.city}}
            </template>
            <template v-slot:handle="{row}">
              <el-button plain type="danger" size="mini" @click="submitDeleteShopUser(row)">移除</el-button>
            </template>
          </my-table>
        </div>
      </div>
    </div>
    <addEmp ref='addEmp'></addEmp>
  </div>
</template>

<script>
  import addEmp from './core/addEmp.vue'
  import {
    shopUserList,
    shopUserQrCode,
    shopUserRemove,
    userUpdateState
  } from '@/api/advertising.shop.user.js'


  export default {
    name: 'pagepp',
    components: {
      addEmp,
    },
    data() {
      return {
        dialog: false,
        loading: false,
        dialogQrCode: false,
        page: 1,
        pageSize: 10,
        columns: [{
            label: '序号',
            type: 'index',
            index: (index) => {
              return ((this.page - 1) * this.pageSize + index + 1)
            },
            align: "center",
            fixed: "left",
            width: 50
          },
          {
            label: '姓名',
            align: "center",
            prop: 'nickname'
          },
          {
            label: '值班状态',
            align: "center",
            prop: 'watchState',
            width: 120
          },
          {
            label: '操作',
            prop: 'handle',
            fixed: "right",
            align: "center",
            width: 120
          }
        ],
        query: {
          nickname: undefined,
        },
        advertisingId: undefined,
      }
    },
    mounted() {
      this.advertisingId = this.$utils.getUrlParam('advertisingId');
    },
    methods: {
      //加载数据
      async loader(page, pageSize) {
        var params = Object.assign({
          advertisingId: this.advertisingId
        }, this.query, {
          page,
          pageSize
        });
        var res = await shopUserList(params);
        this.page = page;
        this.pageSize = pageSize;
        return {
          total: res.data.length,
          list: res.data.slice((page - 1) * pageSize, page * pageSize)
        };
      },
      searchTable() {
        this.$refs.myTableRef.refresh(this.page);
      },
      back() {
        this.$router.push('/system/advertising/shopManage');
      },

      // 添加员工
      addEmp() {
        this.$refs.addEmp.open();
      },

      async submitDeleteShopUser(row) {
        this.$confirm(`确定移除“${row.nickname}”？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          var res = await shopUserRemove(row.userId);
          this.$utils.showSuccessMessage(res.msg);
          this.searchTable();
        });
      },

      // 开关切换
      async changSwitch(event, row, index) {
        var params = {
            userId: row.userId,
            advertisingId: row.advertisingId,
            watchState: event,
        };
        var res = await userUpdateState(params);
        this.searchTable();
      }

    },
  }
</script>

<style scoped>
  .container {
    padding: 15px;
  }
</style>

<style scoped lang="scss">
  .detaild-container {
    // height: 200px;
    min-height: 100%;

    .my-float {
      height: calc(100% - 78px);
    }

    .left {
      width: 40%;
      border-right: 14px solid #fafafa;
      box-sizing: border-box;
      overflow-y: auto;
    }

    .right {
      width: 60%;
      overflow-y: auto;
      padding-top: 20px;

      .business-table {
        padding: 0 20px;
      }
    }

    .header-box {
      padding: 20px;
      border-bottom: 14px solid #fafafa;
      box-sizing: border-box;
    }

    .business-info {
      padding: 0 20px;
      position: relative;

      .qiye-Logo {
        width: 100px;
        height: 100px;
        display: block;
        margin: 0 auto;
        box-shadow: 0 0 15px #ededed;
        border-radius: 50%;
      }

      .business-txt-box {
        padding-top: 15px;
        padding-left: 10px;

        .business-tit {
          font-size: 18px;
          margin-bottom: 10px;
          text-align: center;
          color: #000;
        }

        .ascription {
          margin-bottom: 4px;

          span {
            font-size: 14px;
            color: #666;
            margin-left: 3px;
          }
        }

        .introduce {
          font-size: 14px;
          color: #666;
          line-height: 18px;
        }
      }

      .label-tpte {
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        padding: 6px 10px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        font-size: 12px;
      }

      .huaxiang {
        background-color: #409EFF;
      }

      .changjing {
        background-color: #67C23A;
      }
    }

    .provide-menu {
      padding: 0 15px;
      padding-left: 25px;

      .text-list {
        padding-left: 10px;
        font-size: 14px;
        padding-top: 10px;
        color: #999;
        cursor: pointer;
      }
    }
  }

  .business-table-titler-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .use-num {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      border-left: 4px solid #007BFF;
      padding-left: 5px;
    }
  }
</style>
